@use 'sass:map';

// el-link样式
@mixin el-link-style {
  & > .el-icon {
    margin-right: 4px;
  }
}

// el-button样式
@mixin el-button-style {
  // height: 30px;
  padding: map.get($spacing, 'firstGear') - 1 map.get($spacing, 'secondGear');
  font-size: var(--el-font-size-small);

  &.is-loading {
    .el-icon.is-loading {
      display: none;
    }

    [class*='el-icon is-loading'] + span {
      margin-left: 0;
    }
  }

  &.is-plain {
    --el-button-bg-color: transparent;
  }
}

:root {
  --el-font-weight-primary: 400;
}

html,
body {
  padding: 0;
  margin: 0;
  font-family: Avenir, Helvetica, Arial, sans-serif;
}

html,
body,
#app {
  min-height: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 500;
}

p {
  margin-top: 0;
  margin-bottom: 1em;
}

.app {
  min-width: 1080px;

  .primary {
    color: $color-primary;
  }

  .success {
    color: $color-success;
  }

  .warning {
    color: $color-warning;
  }

  .danger {
    color: $color-danger;
  }

  .error {
    color: $color-error;
  }

  .info {
    color: $color-info;
  }

  .el-container {
    min-height: 100vh;
  }

  .el-footer {
    text-align: center;
  }

  .el-divider {
    margin: 12px 0;
  }

  .el-tabs {
    .el-tabs__item {
      font-weight: normal;
    }

    .el-tabs__nav-wrap::after {
      height: 1px;
    }
  }

  .el-link {
    @include el-link-style;
  }

  .el-button {
    @include el-button-style;
  }

  .el-input__inner {
    color: var(--el-text-color-primary);
  }

  .el-input,
  .el-textarea__inner {
    font-size: var(--el-font-size-small);
  }

  .el-date-editor .el-range__icon,
  .el-date-editor .el-range-input {
    font-size: var(--el-font-size-small);
    left: 4px;
  }

  .el-radio-button {
    .el-radio-button__inner {
      font-size: var(--el-font-size-small);
    }
  }

  .el-form-item {
    margin-bottom: map.get($spacing, 'secondGear');

    .el-form-item__label {
      font-size: var(--el-font-size-small);
      color: map.get($text-color, 'regular');
    }

    .el-date-editor {
      padding: 0;

      &.el-date-editor--daterange {
        padding: 0 10px;
      }

      .el-input__wrapper {
        width: 100%;
        box-sizing: border-box;
      }
    }

    .el-select {
      width: 100%;
    }
  }

  .el-form-item__content .el-input-number {
    width: 100%;

    .el-input .el-input__inner {
      text-align: left;
    }
  }

  .el-card {
    .el-card__header {
      font-size: var(--el-font-size-medium);
      padding: map.get($spacing, 'firstGear') map.get($spacing, 'secondGear');
    }
  }

  .el-dialog {
    overflow: hidden;

    .el-dialog__header {
      background-color: var(--el-fill-color-lighter);
      margin-right: 0;

      .el-dialog__title {
        font-size: var(--el-font-size-base);
      }
    }

    .el-dialog__headerbtn {
      top: 0;
      font-size: var(--el-font-size-base);

      .el-dialog__close {
        color: var(--el-text-color-regular);
      }
    }

    .el-dialog__body {
      padding: var(--el-dialog-padding-primary);
      font-size: var(--el-font-size-base);
    }

    .el-dialog__footer {
      // padding-top: var(--el-dialog-padding-primary);
      border: 1px solid var(--el-border-color-dark);
      padding: map.get($spacing, 'thirdGear') var(--el-dialog-padding-primary);
    }
  }

  .el-drawer {
    .el-drawer__header {
      background-color: var(--el-fill-color-lighter);
      padding: map.get($spacing, 'secondGear');
      color: map.get($text-color, 'primary');
    }

    .el-drawer__close-btn {
      font-size: var(--el-font-size-base);
    }
  }

  .el-table {
    color: var(--el-text-color-primary);

    &.el-table--border {
      .el-table__cell {
        border-right-width: 0;

        &:not([rowspan='1']) {
          border-right-width: 1px;
          border-left: var(--el-table-border);
        }
      }
    }

    .cell {
      line-height: 1.4;
    }
  }

  // el-table-fixed-column--left
  .el-table__header {
    th.el-table__cell,
    th.el-table-fixed-column--left.el-table__cell,
    th.el-table-fixed-column--right.el-table__cell {
      font-size: map.get($font-size, 'base');
      font-weight: normal;
      background-color: var(--el-fill-color-light);
    }
  }

  .el-descriptions__body .el-descriptions__table:not(.is-bordered) .el-descriptions__cell {
    padding-bottom: map.get($spacing, 'firstGear');
  }

  .el-descriptions__label:not(.is-bordered-label) {
    margin-right: map.get($spacing, 'firstGear');
    color: var(--el-text-color-regular);

    // &::after {
    //   content: ':';
    // }
  }

  .el-descriptions__content:not(.is-bordered-label) {
    color: var(--el-text-color-primary);
  }

  .icon {
    // width: 1em;
    // height: 1em;
    vertical-align: -0.15em;
    /* stylelint-disable-next-line value-keyword-case */
    fill: currentColor;
    overflow: hidden;
  }

  // 将需要两边分割的元素左右各居两边
  .info-card-header-space {
    display: flex;
    justify-content: space-between;
  }

  // 将需要居右的按钮居右
  .form-options-btns {
    display: flex;
    justify-content: end;
  }
}

.el-select-dropdown .el-select-dropdown__item {
  font-size: var(--el-font-size-small);
}

.el-overlay {
  .el-message-box {
    padding-bottom: map.get($spacing, 'secondGear');

    .el-message-box__header {
      background-color: var(--el-fill-color-lighter);

      .el-message-box__title {
        font-size: var(--el-font-size-base);
      }
    }
  }

  .el-link {
    @include el-link-style;
  }

  .el-button {
    @include el-button-style;
  }
}

// 需要给指定宽度
.text-one-line-overflow {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 将当前元素高度铺满内容区(列表页专用)
.covered-with-content {
  min-height: calc(100vh - 105px);

  &.el-card {
    border-width: 0;
    box-sizing: border-box;
    position: relative;
    padding-bottom: map.get($spacing, 'fifthGear') + map.get($spacing, 'thirdGear'); // 分页悬浮所需要的内边距
  }

  .el-card__body {
    // height: calc(100% - map.get($spacing, 'secondGear') * 2);
    box-sizing: border-box;
    height: 100%;
    padding-bottom: 0;

    & > .pro-saas-table-pagination-box {
      position: absolute;
      bottom: map.get($spacing, 'secondGear');
      width: 100%;
    }
  }
}

// 将当前元素铺满内容区（详情页专用）
.covered-with-info-content {
  // max-height: auto;
  min-height: calc(100vh - 105px);
  height: calc(100vh - 105px);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  .el-card__body {
    flex: 1;
    box-sizing: border-box;
    overflow-y: auto;
  }

  &.covered-with-info-has-option-btn {
    padding-bottom: 72px;
    position: relative;

    .fixed-option-btns {
      box-sizing: border-box;
      position: absolute;
      bottom: map.get($spacing, 'secondGear');
      left: 0;
      width: 100%;
      padding-right: map.get($spacing, 'firstGear');
    }
  }
}

.covered-with-tabs {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;

  & > .el-tabs__content {
    flex: 1;
    overflow-y: auto;
  }

  & > .el-tabs__content .el-tab-pane {
    height: 100%;
  }
}

.info-form-item-full-space {
  width: 100%;
  gap: map.get($spacing, 'firstGear');

  .el-space__item:first-child {
    flex: 1;
  }
}
